<!--挂号记录  -->
<template>
	<view>
		<view class="add">(点击框查看体检记录)</view>
		<view class="container">
			<view class="item" v-for="item in list" @click="recordClick(item.id, item.symptoms, item.appointmentTime)">
				<view class="content">
					<!--就诊医生-->
					<view class="record">
						<view class="uni-list-cell-left">
							医生姓名： {{item.userName}}
						</view>
					</view>

					<view class="record">
						<view class="uni-list-cell-left">患者症状:</view>
						<view class="symptoms">
							<text>{{item.symptoms}}</text>
						</view>
					</view>

					<view class="record">
						<view class="uni-list-cell-left">
							创建时间:
						</view>
						<view class="recordText">
							<text>{{item.appointmentTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userView } from '@/api/index.js'
	export default {
		data() {
			return {
				list: [],
				id: ''
			}
		},
		onLoad(option){
			this.id = option.id
			this.getList()
			console.log(option)
		},
		methods: {
			recordClick(id, symptoms, time) {
				console.log(id, symptoms, time)
				uni.navigateTo({
					url: `/pages/registrationRecord/record?id=${id}&symptoms=${symptoms}&time=${time}`
				})
			},
			getList() {
				let param = {
					id: this.id,
					current: 1,
					size: 500
				}
				userView(param).then(res => {
					if(res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.list = [...res.data.rows] || []
				})
			}
		}
	}
</script>

<style>
	.add{
		margin-top: 50rpx;
		font-size: 50rpx;
		color: #550000;
	}
	.top {
		padding-top: 40rpx;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: larger;
		font-weight: bold;
	}

	.details {
		margin-top: 50rpx;
		text-align: left;
		font-size: calc();
	}

	page {
		height: 100%;
	}

	.container {
		height: auto;
		background-color: rgba(74, 141, 156, 0.1);
		padding: 1;
		box-sizing: border-box;
		margin-top: 60rpx;

	}

	.content {
		padding-bottom: 60rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: rgba(74, 141, 156, 0.5);
		border: 1px solid #FFFFFF;
		margin-top: 60rpx;
	}


	.record {
		/* background-color: #fff;  */
		/* display: flex; */
		flex-direction: row;
		padding: 10rpx;

	}

	.uni-list-cell-left {
		padding-right: 40rpx;
		color: #FFFFFF;
		font-size: medium;
		white-space: pre-wrap;
		font-weight: bold;
	}

	.recordText {
		border: 1px solid #FFFFFF;
		border-radius: 10px;
		width: 400rpx;
		height: 50rpx;
		display: flex;
		align-items: flex-start;

	}

	.symptoms {
		border: 1px solid #FFFFFF;
		border-radius: 10px;
		width: auto;
		height: auto;
		display: flex;
		padding: 10rpx;

	}

	text {
		margin-left: 20rpx;
		color: #FFFFFF;
		font-size: medium;

	}

	.line {
		margin-top: 20rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
</style>
